<template>
  <div style="background:#f3f6f8" id="home">
    <el-row>
        <ul>
            <template v-for = "(item,index) in testlist">
                <li style="width:33.3%;float:left" v-if="!item.type" class="font-12 draggable-element" :data-index = "item.key">
                    <div class="project-piece bgcolor02 h230" >
                        <div class="bgcolor04">
                            <h3 class="font-14 pl-08 clearfix">
                                <span class="">{{item.title}}</span>
                                <div class="fr mr-10">
                                    <i class="el-icon-setting"></i>
                                </div>
                            </h3>
                            <ul>
                                <li  v-for = "item in testData" >
                                    <el-row>
                                        <el-col :span = "10" class="pl-08">{{item.name}} </el-col>
                                        <el-col :span = "10" class="text-center">{{item.time}}</el-col>
                                        <el-col :span = "4"  class="text-right pr-08 color02 pointer" > <span @click = "audit.show=true">审核</span></el-col>
                                    </el-row>
                                </li>
                                <li class="text-right pr-08">
                                <a href="">更多</a> 
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li style="width:66.6%;float:left" v-if="item.type == 'h'" class="draggable-element" :data-index = "item.key">
                    <div class="project-piece ">
                        <div class="bgcolor04">
                            <h3 class="font-14 pl-08 clearfix">
                                {{item.title}}
                                <div class="fr mr-10">
                                    <i class="el-icon-setting"></i>
                                </div>
                            </h3>
                            <div class="mt-20">
                                <el-table :data = "list" class="text-center" height="362" border>
                                    <el-table-column label="姓名" :show-overflow-tooltip = "true" prop="name"></el-table-column>
                                    <el-table-column label="性别" :show-overflow-tooltip = "true" prop="nickname"></el-table-column>
                                    <el-table-column label="身份证号" :show-overflow-tooltip = "true" prop="idCardNum"></el-table-column>
                                    <el-table-column label="身份证正面" :show-overflow-tooltip = "true" >
                                        <template scope="scope">
                                        <span class="color02 pointer" @click="checkIdCard">
                                                预览
                                        </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="身份证反面" :show-overflow-tooltip = "true" >
                                        <template scope="scope">
                                            <span class="color02 pointer"  @click="checkIdCard">
                                                预览
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" :show-overflow-tooltip = "true">
                                        <template scope="scope">
                                            <div class="clearfix">
                                                <span class="fl color02 pointer" @click="ispass(2)">通过</span> <span class="fr color02 pointer"  @click="ispass(3)">不通过</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="bgcolor04 page clearfix">
                            <el-pagination
                                class="fr"
                                small
                                layout="prev, pager, next"
                                @current-change="changePage"
                                :total="50">
                            </el-pagination>
                        </div>
                    </div>
                </li>
            </template>
        </ul>    
    </el-row>
    <el-dialog
        title="预览"
        :visible.sync="showIdcard"
        size="tiny">
    <div class="text-center">
        <img src="https://dummyimage.com/350x350/fff&text=#0011ff" alt="">
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showIdcard = false">关 闭</el-button>
    </span>
    </el-dialog>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        @close="closeDialog('form')"
        size="tiny">
    <el-form ref="form" :model="form"  :rules="auditRules" >
        <el-form-item >
            <el-form-item label="选择日期" prop="expireDate" v-if="form.auditStatus==2">
                    <el-date-picker v-model="form.expireDate" type="date" placeholder="选择日期" default-value>
                    </el-date-picker>
            </el-form-item>
           <el-form-item label="原因分类" prop="reasonType" v-if="form.auditStatus==3">
                    <el-select v-model="form.reasonType" placeholder="请选择" >
                        <el-option v-for="item in reasonList" :key="item.key" :label="item.key" :value="item.value">
                        </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="提醒内容" prop="reason" v-if="form.auditStatus==3" class="mt-20">
                    <el-input v-model="form.reason" type="textarea" auto-complete="off" placeholder="最多100个汉字"></el-input>
            </el-form-item>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
    </span>
    </el-dialog> 

        <el-dialog
        title="企业认证信息"
        :visible.sync="audit.show"
        @close="closeDialog('audit')"
        @open="fetchCompanyReasonList"
        >
        <div>
            <div>
                <div class="text-center">
                     <img src="https://dummyimage.com/150x150/ccc&text=#0011ff" alt="">
                </div>
                <span > 企业名称：<span v-text=""></span></span>
                <span> 所在地：<span v-text=""></span></span>
                <span> 统一社会信用码：<span v-text=""></span></span>
            </div>
        </div>
        <el-form :model="audit" :rules="auditRules" ref="audit" class="mt-10">
                <el-form-item label="" prop="auditStatus">
                    <el-radio class="radio" v-model="audit.auditStatus" label="2"  @change='fetchCompanyReasonList'>通过</el-radio>
                    <el-radio class="radio" v-model="audit.auditStatus" label="3" @change='fetchCompanyReasonList'>不通过</el-radio>
                </el-form-item>
                <el-form-item label="选择日期" prop="expireDate" v-if="audit.auditStatus==2">
                    <el-date-picker v-model="audit.expireDate" type="date" placeholder="选择日期" default-value>
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="原因分类" prop="reasonType" v-if="audit.auditStatus==3">
                    <el-select v-model="audit.reasonType" placeholder="请选择" >
                        <el-option v-for="item in reasonList" :key="item.key" :label="item.key" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="提醒内容" prop="reason" v-if="audit.auditStatus==3">
                    <el-input v-model="audit.reason" type="textarea" auto-complete="off" placeholder="最多100个汉字"></el-input>
                </el-form-item>
            </el-form>
        <div class="mt-20 text-right">
            <el-button @click="audit.show = false">取 消</el-button>
            <el-button type="primary" @click="certCompanySubmit('audit')">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>
<script>
/* global $ */
import {getCertPersonalNotAudited, getCompanyReasonList, postCertCompany} from '@/api/user.js'
export default{
    created () {
        let self = this
        let req = {
            currentPage: 1,
            pageSize: 4
        }
        getCertPersonalNotAudited(req).then(data => {
            this.list = data.data.data.data
        })
        if (localStorage.dashboard_sort) {
            let locSort = JSON.parse(localStorage.dashboard_sort)
            if (locSort.length > 0) {
                this.testlist = JSON.parse(localStorage.dashboard_sort)
            }
        }
        $(window).on('unload', function () {
            self.sortLayout()
        })
    },
    mounted () {
        $('.draggable-element').arrangeable()
    },
    methods: {
        // 重置表单
        closeDialog (formName) {
            this.resetForm(formName)
        },
        // 重置表单
        resetForm (formName) {
            this.$refs[formName].resetFields()
        },
        // 审核确定逻辑
        certCompanySubmit: function (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let data = this.certCompanyForm
                    // data.id = this.activeDialogData.id
                    // data.mobile = this.changeMobileForm.mobile
                    // data.reason = this.changeMobileForm.reason
                    postCertCompany(data).then((response) => {
                        if (response.data.code === 0) {
                            this.closeDialog(formName)
                            this.audit.show = false
                        } else if (response.data.code === 1) {
                            this.$message('修改失败')
                        }
                    }).catch(function (err) {
                        console.log(err)
                    })
                }
            })
        },
        // 查询原因列表
        fetchCompanyReasonList () {
            getCompanyReasonList().then((response) => {
                if (response.data.code === 0) {
                    this.reasonList = response.data.data
                } else if (response.data.code === 1) {
                    // this.$message('修改失败')
                }
            }).catch(function (err) {
                console.log(err)
            })
        },
        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$message('设置成功')
                    this.dialogVisible = false
                } else {
                    return false
                }
            })
        },
        // 预览身份证
        checkIdCard (type) {
            this.showIdcard = true
        },
        // 翻页
        changePage (currentPage) {
            let req = {
                currentPage: currentPage,
                pageSize: 5
            }
            getCertPersonalNotAudited(req).then(data => {
                this.list = data.data.data.data
            })
        },
        // 是否通过
        ispass (type) {
            this.form.auditStatus = type
            this.fetchCompanyReasonList()
            this.dialogVisible = true
        },
        // 拖拽排序保存本地
        sortLayout () {
            let elm = $('.draggable-element')
            let arr = []
            for (let i = 0; i < elm.length; i++) {
                for (let j = 0; j < this.testlist.length; j++) {
                    if (parseInt(elm.eq(i).attr('data-index')) === this.testlist[j].key) {
                        arr.push(this.testlist[j])
                    }
                }
            }
            localStorage.dashboard_sort = JSON.stringify(arr)
        }
    },
    // 离开此路由时保存页面排序
    beforeRouteLeave (to, from, next) {
        this.sortLayout()
        next()
    },
    data () {
        return {
            auditRules: {
                auditStatus: {
                    required: true,
                    message: '请选择是否通过',
                    trigger: 'blur'
                },
                expireDate: {
                    required: true,
                    type: 'date',
                    message: '请选择日期',
                    trigger: 'blur,change'
                },
                reasonType: {
                    required: true,
                    message: '请选择原因分类',
                    trigger: 'blur'
                },
                reason: {
                    required: true,
                    message: '请输入提醒内容',
                    trigger: 'blur'
                }
            },
            reasonList: null,
            audit: {
                show: false,
                id: '',
                auditStatus: '',
                expireDate: '',
                reasonType: '',
                reason: ''
            },
            form: {
                reason: '',
                auditStatus: 2,
                expireDate: '',
                reasonType: ''
            },
            rules: {
                reason: [
                   {required: true, message: '请输入原因'}
                ]
            },
            dialogVisible: false,
            certPersonalDialogStatus: false,
            list: null,
            currentPage: '',
            showIdcard: false,
            testlist: [
                {
                    title: '待审核项目1',
                    key: 1
                },
                {
                    title: '待审核项目2',
                    key: 2
                },
                {
                    title: '待审核项目3',
                    key: 3
                },
                {
                    title: '待审核项目4',
                    key: 4,
                    type: 'h'
                },
                {
                    title: '待审核项目5',
                    key: 5
                },
                {
                    title: '待审核项目6',
                    key: 6
                },
                {
                    title: '待审核项目7',
                    key: 7
                },
                {
                    title: '待审核项目8',
                    key: 8
                }
            ],
            testData: [
                {
                    name: '张晓',
                    time: '2017-02-15 22:20',
                    id: '123'
                },
                {
                    name: '张晓',
                    time: '2017-02-15 22:20',
                    id: '123'
                },
                {
                    name: '张晓',
                    time: '2017-02-15 22:20',
                    id: '123'
                },
                {
                    name: '张晓',
                    time: '2017-02-15 22:20',
                    id: '123'
                },
                {
                    name: '张晓',
                    time: '2017-02-15 22:20',
                    id: '123'
                }
            ]
        }
    }
}

</script>
<style scoped>
    .h230{
        height: 226px;
    }
    .project-piece{
        padding: 0 8px;
        margin-bottom: 16px;
    }
    .project-piece h3 {
        border-bottom: 1px solid #dbdbdb;
        height: 40px;
        line-height: 40px;
        line-height: 40px/9
    }
    .project-piece li{
        height: 30px;
        line-height: 30px;
        line-height: 30px/9;
    }
    .pl-08{
        padding-left:8px; 
    }
    .pr-08{
        padding-right:8px; 
    }
    .project-piece .page{
        padding: 6px 0;
    }
</style>